<template>
  <div class="app-container">
    <div>
      产品名称：
      <el-input placeholder="请输入产品名称" v-model="product.name" clearable>
      </el-input>
    </div>
    请选择地区：
    <el-row>
      <el-col :span="8">
        <el-select
          v-model="pname"
          placeholder="请选择"
          @change="onChangeProvince"
        >
          <el-option
            v-for="item in provinces"
            :key="item.code"
            :value="item.code"
            :label="item.name"
            :pname="item.name"
            
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8" v-show="!isHide">
        <el-select
          @change="onChangeCity"
          v-model="cname"
          style="margin-left: 20px"
          placeholder="请选择"
        >
          <el-option
            v-for="item in searchCList"
            :key="item.code"
            :value="item.code"
            :label="item.name"
            :cname="item.name"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :span="8">
        <el-select
          v-model="dname"
          style="margin-left: 20px"
          placeholder="请选择"
        >
          <el-option
            v-for="item in searchDList"
            :key="item.code"
            :value="item.code"
            :label="item.name"
            :dname="item.name"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-button type="primary" @click="add">提交</el-button>
  </div>
</template>
<script>
import {add, all } from "@/api/product";
export default {
  data() {
    return {
      
      pname: "",
      pid: "",
      provinces: [],
      cname: "",
      cid: "",
      cities: [],
      dname: "",
      districts: [],
      searchCList: [],
      searchDList: [],
      isHide: false,

      product:{
          name:"",
          areaCode:""
      }
    };
  },
  methods: {
    search() {
      all().then((res) => {
        console.log(res);
        var data = res.data;
        data.forEach((item) => {
          //省
          if (item.level == 1) {
            this.provinces.push(item);
          }
          //市
          if (item.level == 2) {
            this.cities.push(item);
          }
          //区
          if (item.level == 3) {
            this.districts.push(item);
          }
        });
        // 初始获取所有list
        // this.searchCList = this.cities;
        // this.searchDList = this.districts;
      });
    },
    onChangeProvince(e) {
      const list = this.cities.filter((item) => item.pid == e);
      // 如果是直辖市，直接选择区
      if (list.length) {
        this.searchCList = list || [];
        this.isHide = false;
      } else {
        this.searchDList =
          this.districts?.filter((item) => item.pid == e) || [];
        this.isHide = true;
      }
      this.cname = "";
      this.dname = "";
    },
    onChangeCity(e) {
      // 根据选择的市筛出对应的区
      const list = this.districts?.filter((item) => item.pid == e) || [];
      this.searchDList = list || [];
      this.dname = "";
    },
    add(){
      this.product.areaCode = this.pname
      add(this.product).then(res=>{
        this.$message({
          message: res.ok?"添加成功":"添加失败",
          type:res.ok?"success":"error"
        })
        location.reload

      })
    }
  },
  
  created() {
    this.search();
  },
};
</script>
<style lang="">
</style>